<template>
  <view class="wrap">
    <!-- <uni-datetime-picker
      type="date"
      v-model="state.today"
      :end="state.now.getTime()"
      @change="setDate"
      @maskClick="state.datepickShow = false"
    > -->
    <view class="date_top">
      <view class="date_btn" @tap="showCalendar">
        <text class="date">{{ isToday(state.today) }}</text>
        <image
          class="img_arrow"
          v-if="!state.datepickShow"
          src="@/static/image/raozg/arrow_down.png"
        />
        <image
          class="img_arrow"
          v-if="state.datepickShow"
          src="@/static/image/raozg/arrow_up.png"
        />
      </view>
      <up-popup :show="state.dateShow" :round="32" mode="bottom" @close="closeCalendar">
        <uni-calendar
          :date="formatDate(state.today, 'yyyy-MM-dd')"
          :showMonth="false"
          :selected="state.dateSelects"
          :start-date="formatDate(state.yearsAgo, 'yyyy-MM-dd')"
          :end-date="formatDate(state.now, 'yyyy-MM-dd')"
          @change="setDate"
          @monthSwitch="getMouthDate"
        />
      </up-popup>
      <!-- </uni-datetime-picker> -->
      <view class="seven">
        <view
          v-for="(item, index) in weekList"
          :key="index"
          :class="['items', index == state.active ? 'active' : '']"
          >{{ transformChinese(item, index) }}</view
        >
      </view>
      <view class="listWrap" v-if="state.getInfoList && state.getInfoList.length > 0">
        <!-- @tap="goDetail(item)" -->
        <!-- <view v-for="(item, index) in list" :key="index" class="list">
        <view class="list_top">
          <view class="list_top_left">
            <text class="list_top_left_text">{{ item.name }}</text>
          </view>
          <view class="list_top_right"> </view>
        </view>
      </view> -->
        <uni-swipe-action>
          <uni-swipe-action-item
            v-for="(item, index) of state.getInfoList"
            :key="index"
            :right-options="options"
            @click="handleClick(item)"
          >
            <view class="item" @tap="updateSports(item)">
              <view class="left">
                <icon type="" :class="['iconfont', item.url, 'icons']"></icon>
              </view>
              <view class="right">
                <view class="top"> {{ item.sportName }} </view>
                <view class="min">
                  <text class="time">{{ item.duration }}分钟</text>
                  <icon
                    type=""
                    v-if="item.feeling == '没感觉'"
                    :class="['iconfont', 'icon-meiganjue1', 'feelImg']"
                  ></icon>
                  <icon
                    type=""
                    v-if="item.feeling == '刚刚好'"
                    :class="['iconfont', 'icon-gangganghao1', 'feelImg']"
                  ></icon>
                  <icon
                    type=""
                    v-if="item.feeling == '有点累'"
                    :class="['iconfont', 'icon-youdianlei1', 'feelImg']"
                  ></icon>
                  <icon
                    type=""
                    v-if="item.feeling == '吃不消'"
                    :class="['iconfont', 'icon-chibuxiao1', 'feelImg']"
                  ></icon>
                  <text class="state">{{ item.feeling }}</text>
                </view>
              </view>
              <img class="towardsRight" src="@/static/image/hmm/4-1.png" alt="" />
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
      <view class="nodate" v-else>
        <img class="img" src="https://ainengli.hzjrsw.com/jkhx/noData.png" alt="" />
        <view class="nodate_text">
          <text class="name">还没有记录</text>
          <text class="name">请点击屏幕下方按钮来添加</text>
        </view>
      </view>
      <up-popup
        class="sportsPopup"
        :show="state.show"
        :closeable="true"
        :round="32"
        mode="bottom"
        @close="close"
      >
        <view class="title">运动信息</view>
        <view class="popup-wrap">
          <view class="card mt24">
            <view class="card-title">
              <text class="border"></text>
              <text class="name">运动类型</text>
            </view>
            <view class="cardList cf">
              <view
                class="cardItem"
                :class="['cardItem', state.sportActive == index ? 'on' : '']"
                v-for="(item, index) in state.sportTypeList"
                :key="index"
                @tap="changeSportType(item, index)"
              >
                <!-- <img
                class="img"
                :src="state.sportActive == index ? item.urlActive : item.url"
                alt=""
              /> -->
                <view :class="['img', state.sportActive == index ? 'active' : 'default']">
                  <icon type="" :class="['iconfont', item.url, 'icons']"></icon>
                </view>
                <view class="item-content">{{ item.value }}</view>
              </view>
            </view>
          </view>
          <view class="card mt24">
            <view class="card-title">
              <text class="border"></text>
              <text class="name">运动时长</text>
              <view class="time">
                <text class="num">{{ state.popupForm.slideValue }}</text>
                <text class="unit">分钟</text>
              </view>
            </view>
            <view class="slider">
              <image class="img_btn reduce" @tap="reduce" src="@/static/image/raozg/reduce.png" />
              <slider
                activeColor="#00d1b6"
                backgroundColor="#e5e6eb"
                block-color="#fff"
                block-size="22"
                :value="state.popupForm.value"
                @change="sliderChange"
                min="0"
                max="300"
              />
              <image class="img_btn plus" @tap="add" src="@/static/image/raozg/plus.png" />
            </view>
          </view>
          <view class="card mt24">
            <view class="card-title">
              <text class="border"></text>
              <text class="name">感觉</text>
            </view>
            <view class="cardList cf">
              <view
                class="cardItem"
                :class="['cardItem', state.feelActive == index ? 'on' : '']"
                v-for="(item, index) in state.feelList"
                :key="index"
                @tap="changeFeel(item, index)"
              >
                <!-- <img
                class="img"
                :src="state.feelActive == index ? item.urlActive : item.url"
                alt=""
              /> -->
                <icon
                  type=""
                  :class="[
                    'iconfont',
                    item.url,
                    'feelicons',
                    state.feelActive == index ? 'active' : 'default'
                  ]"
                ></icon>
                <view class="item-content">{{ item.value }}</view>
              </view>
            </view>
          </view>
          <view class="fixedBtn">
            <text @tap="save" class="name">保存</text>
          </view>
        </view>
      </up-popup>
      <view class="authenticationBtn" @tap="recordSports">
        <view class="wraps">
          <view class="goAuthentication">记运动</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { formatDate } from '@/utils/util'
import {
  query_all_sport,
  query_get_sport,
  save_sport,
  update_sport,
  delete_sport,
  query_mouth_sport
} from '@/api/sports'
import { onLoad, onUnload, onShow } from '@dcloudio/uni-app'
const state = reactive({
  now: new Date(),
  yearsAgo: new Date().setFullYear(new Date().getFullYear() - 1),
  today: new Date(),
  datepickShow: false,
  dateShow: false,
  dateSelects: [],
  active: 0,
  userInfo: {},
  show: false,
  getInfoList: [],
  sportTypeList: [
    {
      url: 'icon-yumaoqiu1',
      active: false,
      value: '羽毛球'
    },
    {
      url: 'icon-yuqie1',
      active: false,
      value: '瑜伽'
    },
    {
      url: 'icon-youyong1',
      active: false,
      value: '游泳'
    },
    {
      url: 'icon-guangchangwu1',
      active: false,
      value: '广场舞'
    },
    {
      url: 'icon-lanqiu1',
      active: false,
      value: '篮球'
    },
    {
      url: 'icon-manzou1',
      active: false,
      value: '慢走'
    },
    {
      url: 'icon-kuaizou1',
      active: false,
      value: '快走'
    },
    {
      url: 'icon-paobu1',
      active: false,
      value: '跑步'
    },
    {
      url: 'icon-kangfucao1',
      active: false,
      value: '康复操'
    },
    {
      url: 'icon-huaibengyundong1',
      active: false,
      value: '踝泵运动'
    },
    {
      url: 'icon-huaxue1',
      active: false,
      value: '滑雪'
    }
  ],
  sportActive: null,
  popupForm: {
    slideValue: 60,
    value: 60
  },
  feelActive: null,
  feelList: [
    {
      url: 'icon-meiganjue1',
      active: false,
      value: '没感觉'
    },
    {
      url: 'icon-gangganghao1',
      active: false,
      value: '刚刚好'
    },
    {
      url: 'icon-youdianlei1',
      active: false,
      value: '有点累'
    },
    {
      url: 'icon-chibuxiao1',
      active: false,
      value: '吃不消'
    }
  ],
  sportId: 0,
  saveType: ''
})
const weekList = ref([])
const options = reactive([
  {
    text: '删除',
    style: {
      backgroundColor: '#ff503d'
    }
  }
])

onLoad(() => {
  getTime()
})
onShow(() => {
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  init()
})

const showCalendar = () => {
  state.datepickShow = !state.datepickShow
  state.dateShow = !state.dateShow
}
const closeCalendar = () => {
  state.dateShow = false
  state.datepickShow = false
}

const init = () => {
  let params = {
    empi: state.userInfo.empi,
    date: formatDate(state.today, 'yyyy-MM-dd')
  }
  query_get_sport(params).then((res) => {
    state.getInfoList = res.data
    state.getInfoList.forEach((item) => {
      item.url = state.sportTypeList.find((val) => val.value == item.sportName)?.url
    })
  })
  let currentMouth = {
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1
  }
  getMouthDate(currentMouth)
}
const getMouthDate = (e) => {
  e.month = Number(e.month)
  let mouthStart =
    (e.month == 1 ? e.year - 1 : e.year) + '/' + (e.month == 1 ? 12 : e.month - 1) + '/20'
  let mouthEnd =
    (e.month == 12 ? e.year + 1 : e.year) + '/' + (e.month == 12 ? 1 : e.month + 1) + '/15'
  let params = {
    empi: state.userInfo.empi,
    start: formatDate(new Date(mouthStart), 'yyyy-MM-dd hh:mm:ss'),
    end: formatDate(new Date(mouthEnd), 'yyyy-MM-dd hh:mm:ss')
  }
  query_mouth_sport(params).then((res) => {
    if (res.data && res.data.length > 0) {
      res.data.forEach((item) => {
        item.sportTime = item.sportTime.split('-').join('/')
        item.date = formatDate(new Date(item.sportTime), 'yyyy-MM-dd')
        item.info = ''
      })
      state.dateSelects = res.data
    }
  })
}
const getTime = () => {
  let day = state.today.getDay()
  weekList.value = [1, 2, 3, 4, 5, 6, 7]
  weekList.value.forEach((item, index) => {
    if (day === 0) {
      state.active = 6
    }
    if (day == item) {
      state.active = index
    }
  })
}
const transformChinese = (item, index) => {
  switch (item) {
    case 1:
      return '一'
    case 2:
      return '二'
    case 3:
      return '三'
    case 4:
      return '四'
    case 5:
      return '五'
    case 6:
      return '六'
    case 7:
      return '日'
  }
}
const isToday = (val) => {
  // 今天昨天前天转换
  let select = formatDate(val, 'yyyy/MM/dd') + ' 00:00:00'
  let today = formatDate(state.now, 'yyyy/MM/dd') + ' 00:00:00'
  if (new Date(today).getTime() - new Date(select).getTime() == 0) {
    return '今天'
  } else if (new Date(today).getTime() - new Date(select).getTime() == 86400000) {
    return '昨天'
  } else if (new Date(today).getTime() - new Date(select).getTime() == 172800000) {
    return '前天'
  } else {
    return formatDate(val, 'yyyy.MM.dd')
  }
}
const setDate = (e) => {
  state.datepickShow = false
  state.dateShow = false
  state.today = new Date(e.fulldate)
  getTime()
  init()
}

const close = () => {
  state.show = false
}
const changeSportType = (item, index) => {
  state.sportActive = index
}
const sliderChange = (e) => {
  state.popupForm.slideValue = e.detail.value
  state.popupForm.value = e.detail.value
}
const reduce = () => {
  if (state.popupForm.value > 0) {
    state.popupForm.slideValue -= 1
    state.popupForm.value -= 1
  }
}
const add = () => {
  if (state.popupForm.value < 300) {
    state.popupForm.slideValue += 1
    state.popupForm.value += 1
  }
}
const changeFeel = (item, index) => {
  state.feelActive = index
}
const recordSports = () => {
  state.show = true
  state.saveType = 'add'
  state.sportId = 0
  state.sportActive = null
  state.feelActive = null
  state.popupForm.slideValue = 60
  state.popupForm.value = 60
}
const updateSports = (item: any) => {
  state.sportActive = state.sportTypeList.findIndex((val) => val.value == item.sportName)
  state.feelActive = state.feelList.findIndex((val) => val.value == item.feeling)
  state.popupForm.slideValue = item.duration
  state.popupForm.value = item.duration
  state.sportId = item.id
  state.saveType = 'update'
  state.show = true
}
const handleClick = (item: any) => {
  // 删除运动
  uni.showLoading()
  delete_sport(item.id).then((res) => {
    uni.showToast({
      title: '删除成功'
    })
    uni.hideLoading()
    init()
  })
}
const save = () => {
  if (!state.sportActive && state.sportActive != 0) {
    uni.showToast({
      title: '请选择一项运动',
      icon: 'error'
    })
    return
  }
  if (!state.feelActive && state.feelActive != 0) {
    uni.showToast({
      title: '请选择您运动结束的感觉',
      icon: 'error'
    })
    return
  }
  if (state.popupForm.slideValue == 0) {
    uni.showToast({
      title: '时间不能为0',
      icon: 'error'
    })
    return
  }
  let params = {
    id: state.sportId,
    empi: state.userInfo.empi,
    sportName: state.sportTypeList[state.sportActive].value,
    duration: state.popupForm.slideValue,
    feeling: state.feelList[state.feelActive].value,
    sportTime: formatDate(state.today, 'yyyy-MM-dd hh:mm:ss')
  }
  uni.showLoading({
    title: '记录中'
  })
  if (state.saveType == 'add') {
    save_sport(params).then((res) => {
      uni.hideLoading()
      uni.showToast({
        title: '保存成功'
      })
      init()
      state.show = false
    })
  } else {
    update_sport(params).then((res) => {
      uni.hideLoading()
      uni.showToast({
        title: '修改成功'
      })
      init()
      state.show = false
    })
  }
}
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}
.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  content: '.';
  visibility: hidden;
}
.mt24 {
  margin-top: 24rpx !important;
}
.wrap {
  padding-bottom: calc(170rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
  .date_top {
    text-align: center;
    .date_btn {
      display: inline-block;
      height: 60rpx;
      line-height: 60rpx;
      padding: 0 32rpx;
      text-align: center;
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 38rpx;
      margin: 24rpx auto;
      .date {
        font-weight: 400;
        font-size: 28rpx;
        color: #222222;
      }
      .img_arrow {
        width: 24rpx;
        height: 24rpx;
        margin-left: 16rpx;
      }
    }
  }
  .seven {
    padding: 0 32rpx;
    display: flex;
    justify-content: space-between;
    gap: 24rpx;
    .items {
      width: 77rpx;
      height: 76rpx;
      line-height: 76rpx;
      text-align: center;
      background: #fff;
      border-radius: 12rpx;
      font-weight: 400;
      font-size: 28rpx;
      box-sizing: border-box;
      color: #222222;
    }
    .active {
      color: #fff;
      background: #00d1b6;
    }
  }
  .listWrap {
    padding: 10rpx 32rpx 0rpx;
    ::v-deep .uni-swipe {
      margin-top: 24rpx;
    }
    ::v-deep .uni-swipe_button {
      border-radius: 0 12rpx 12rpx 0 !important;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
    }
    .item {
      background: #fff;
      border-radius: 16rpx;
      padding: 32rpx;
      position: relative;
      .left {
        display: inline-block;
        vertical-align: middle;
        width: 96rpx;
        height: 96rpx;
        line-height: 96rpx;
        text-align: center;
        background: #f2fdfb;
        border-radius: 8rpx;
        margin-right: 20rpx;
        .icons {
          font-size: 64rpx;
          color: #00d1b6;
        }
      }
      .right {
        display: inline-block;
        vertical-align: middle;
        width: calc(100% - 158rpx);
        font-size: 28rpx;
        color: #999;
        text-align: left;
        .top {
          font-size: 30rpx;
          color: #333;
          font-weight: 700;
        }
        .min {
          .time,
          .state {
            display: inline-block;
            vertical-align: middle;
          }
          .feelImg {
            display: inline-block;
            transform: translateY(4rpx);
            font-size: 32rpx;
            color: #00d1b6;
            margin: 0 8rpx 0 16rpx;
          }
        }
      }
      .towardsRight {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 32rpx;
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  .nodate {
    .img {
      display: block;
      width: 320rpx;
      height: 240rpx;
      margin: 240rpx auto 0;
    }
    .nodate_text {
      .name {
        display: block;
        font-size: 28rpx;
        color: #666;
        text-align: center;
        margin-top: 10rpx;
      }
    }
  }
  ::v-deep .u-popup {
    .u-popup__content {
      background: #f3f7f8;
      overflow: hidden;
      .title {
        padding: 32rpx 32rpx;
        text-align: center;
        font-weight: 700;
        border-bottom: 1rpx solid #e5e6eb;
        background: #fff;
        font-size: 32rpx;
      }
      .popup-wrap {
        max-height: calc(100vh - 100px);
        overflow-y: scroll;
        padding-bottom: 156rpx;
        .card {
          background: #fff;
          margin: 0 32rpx;
          padding: 32rpx;
          border-radius: 16rpx;
          text-align: left;
          .card-title {
            position: relative;
            .border {
              display: inline-block;
              vertical-align: middle;
              width: 8rpx;
              height: 32rpx;
              background: #00d1b6;
            }
            .name {
              display: inline-block;
              vertical-align: middle;
              font-size: 32rpx;
              color: #222;
              font-weight: 700;
              margin-left: 16rpx;
            }
            .time {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
              font-size: 28rpx;
              color: #999;
              .num {
                font-size: 48rpx;
                color: #222;
                font-weight: 700;
                display: inline-block;
                vertical-align: middle;
                margin-right: 5rpx;
              }
              .unit {
                display: inline-block;
                vertical-align: middle;
              }
            }
          }
          .cardList {
            .cardItem {
              float: left;
              width: 20%;
              padding-top: 32rpx;
              margin-right: 6%;
              text-align: center;
              &:nth-child(4n + 4) {
                margin-right: 0;
              }
              .img {
                padding: 28rpx 24rpx;
                border-radius: 8rpx;
                .icons {
                  font-size: 64rpx;
                }
              }
              .feelicons {
                font-size: 84rpx;
                background: transparent !important;
              }
              .active {
                background: #f2fdfb;
                color: #00d1b6;
              }
              .default {
                background: #fafafa;
                color: #cfcfcf;
              }
              .item-content {
                display: block;
                text-align: center;
                font-size: 30rpx;
                color: #222;
                font-weight: 700;
                margin-top: 16rpx;
              }
            }
          }
        }
      }
      .slider {
        padding: 0 32rpx;
        margin: 32rpx auto 0;
        position: relative;
        .img_btn {
          width: 40rpx;
          height: 40rpx;
          position: absolute;
        }
        .reduce {
          left: 0;
          top: 0;
        }
        .plus {
          right: 0;
          top: 0;
        }
      }
      .fixedBtn {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 10;
        padding: 24rpx 32rpx;
        padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
        box-sizing: border-box;
        background: #fff;
        color: #fff;
        text-align: center;
        font-weight: 700;
        font-size: 32rpx;
        .name {
          margin: 0;
          width: 100%;
          display: inline-block;
          padding: 22rpx 0;
          background: #00d1b6;
          border-radius: 200rpx;
        }
      }
      .u-popup__content__close {
        top: 40rpx;
        .uicon-close {
          font-size: 32rpx !important;
          line-height: 32rpx !important;
        }
      }
      .uni-calendar {
        .uni-calendar__header {
          .uni-calendar__header-text {
            font-size: 30rpx !important;
          }
        }
        .uni-calendar__box {
          .uni-calendar__weeks-day-text {
            font-size: 30rpx !important;
          }
          .uni-calendar-item__weeks-box-text {
            font-size: 30rpx !important;
          }
          .uni-calendar-item--isDay {
            border-radius: 8rpx;
          }
        }
      }
    }
  }
  .authenticationBtn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    background: #fff;
    .wraps {
      padding: 0 32rpx;
      padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
      padding-top: 24rpx;
      text-align: center;
      font-size: 32rpx;
      border-top: 1rpx solid #e5e6eb;
      color: #666;
      .goAuthentication {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
        border: 1rpx solid #00d1b6;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 44rpx;
        background: #00d1b6;
        color: #fff;
      }
    }
  }
  ::v-deep .dialog-close {
    display: none;
  }
  ::v-deep .uni-calendar-item--isDay {
    background: #00d1b6;
  }
  ::v-deep .uni-calendar-item--checked {
    background: #00d1b6;
  }
  ::v-deep .uni-date-editor {
    width: 254rpx;
    margin: 0 auto;
  }
  ::v-deep .uni-calendar-item--isDay-text {
    color: #00d1b6;
  }
  ::v-deep .uni-calendar-item--isDay .uni-calendar-item--isDay-text {
    color: #fff;
  }
  ::v-deep .uni-calendar-item__weeks-box-circle {
    background: #00d1b6;
  }
  ::v-deep .uni-calendar-item__weeks-box .uni-calendar-item--checked {
    background-color: #00d1b6;
  }
  ::v-deep .uni-calendar__weeks-day {
    background: #ebfbf9;
    .uni-calendar__weeks-day-text {
      color: #00d1b6;
    }
  }
  ::v-deep .uni-datetime-picker--btn {
    background-color: #00d1b6;
  }
}
</style>
